<template>
  <div class="login-container">
    <div class="login-bg">
      <!--      <div class="logo" style="position: absolute;top: 150px;left: calc(50% - 200px);">-->
      <!--        <img src="../../../public/static/images/zzcl-logo.png" style="width: 400px"/>-->
      <!--      </div>-->
      <div class="login-form">
        <p class="login-form-title">登录</p>
        <p style="text-align: center;margin-top: 4px;color: #999999">欢迎使用设备管理平台</p>
        <div class="login-form-item">
          <input v-model="form.username" type="text" class="login-form-input" placeholder="账号">
          <div class="form-item-prepend">
            <i class="login-icon el-icon-user-solid"></i>
          </div>
        </div>
        <div class="login-form-item">
          <input v-model="form.password" type="password" class="login-form-input" placeholder="密码">
          <div class="form-item-prepend">
            <i class="login-icon el-icon-lock"></i>
          </div>
        </div>
        <div class="login-form-item">
          <el-button @click="login" class="block-btn" type="primary" :loading="disabled">立即登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { logins } from '../api/api'
export default {
  data () {
    return {
      form: {
        username: '',
        password: '',
        captcha: 1
      },
      disabled: false
    }
  },
  created () {
  },
  methods: {
    login () {
      let text = ''
      if (!this.form.username) {
        text = '请输入账号'
      } else if (!this.form.password) {
        text = '请输入密码'
      }
      if (text) {
        this.$message({ message: text, type: 'warning', showClose: true })
      } else {
        this.disabled = true
        this.$store.commit('setPersistence', { username: this.form.username })
        logins(this.form)
          .then(res => {
            if (res.code === 0) {
              this.$store.commit('setPersistence', { token: res.token, username: this.form.username })
              this.disabled = false
              this.$message.success('登录成功')
              this.$router.push({ name: 'index', query: this.$route.query })
            } else {
              this.$message.error(res.msg)
            }
          }).catch(e => {
            this.disabled = false
          })
      }
    },
    loginLoral () {
      const form = {
        username: 'admin',
        password: 'admin'
      }
      this.loraReq.post('/user/login', form).then(res => {
        localStorage.setItem('loraToken', 'bearer ' + res.jwt)
        this.$router.push({ name: 'home', query: this.$route.query })
      }).catch(e => {
        this.disabled = false
      })
    }
  }
}
</script>

<style scoped>
.login-container {
  width: 100%;
  height: 100%;
}

.login-bg {
  position: fixed;
  height: 100%;
  width: 100%;
  /*overflow: hidden;*/
  background-image: url("../../public/static/image/logo6.jpg");
  background-size: cover;

}

.login-form {
  position: absolute;
  /*background-color: rgba(80, 160, 255, .1);*/
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 10px 6px inset rgba(19, 76, 193, .2);
  top: 50%;
  left: 50%;
  transform: translate(0, -50%);
  z-index: 10;
  font-size: 14px;
  padding: 30px 30px 40px 30px;
  border: 1px solid #395d88;
  margin-left: -181px;
  width: 362px;
  height: 321px
}

.login-icon {
  width: 20px;
  height: 20px;
}

.login-form-title {
  letter-spacing: 2px;
  font-size: 26px;
  color: #395d88;
  text-align: center;
  /*margin-bottom: 50px;*/
}

.block-btn {
  width: 100%;
  background-color: #24b7f3;
  border-radius: 0.3;
  border: none;
  padding-top: 15px;
  padding-bottom: 15px;
}

.block-btn:hover {
  background-color: #139cd6;
}

.login-form-input {
  width: 300px;
  font-size: 16px;
  color: #395d88;
  height: 40px;
  line-height: 40px;
  padding: 0 15px 0 40px;
  border: 1px solid #174fb3;
  background-color: transparent;
  border-radius: 3px;
}

.login-form-input::placeholder {
  color: #aaa;
}

.form-item-prepend {
  color: #26a1dc;
  font-size: 16px;
}

.login-form-input:focus+.form-item-prepend {
  color: #49c7ff;
}

.login-icon {
  width: 20px;
  height: 20px;
  display: block;
  background-repeat: no-repeat;
  background-position: center center;
}

.icon-user {
  background-image: url(../../public/static/image/ic_zhanghao_20x20.png)
}

.icon-password {
  background-image: url(../../public/static/image/ic_mima_20x20.png)
}
</style>
